.layout-tabs {
  .ra-tabs-nav {
    height: 36px;
    margin-bottom: 0;
  }

  .ra-tabs-content-holder {
    height: 0;
    flex: none;
  }

  /* 通用样式 */
  .layout-tabs-tab {
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    width: 150px;
    height: 36px;

    .ra-tabs-tab {
      position: relative;
      height: 100%;
      width: 100%;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--ant-color-text);

      .ra-tabs-tab-content {
        padding-left: 8px;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        > span:not(.ra-tabs-tab-icon) {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .ra-tabs-tab-remove {
        display: flex;
        align-items: center;
        line-height: 1;
        transition: opacity 0.2s;
        padding: 8px 4px;
        height: 100%;
        font-size: 12px;
      }
    }

    &:hover:not(.layout-tabs-tab-wrapper-active) {
      .ra-tabs-tab {
        background-color: var(--ant-color-primary-bg-hover);
        color: var(--ant-color-primary);
      }
    }

    &.layout-tabs-tab-wrapper-active {
      .ra-tabs-tab {
        background-color: var(--ant-color-primary-bg);
        color: var(--ant-color-primary);
      }
    }
  }

  /* 经典样式 */
  .layout-tabs-tab-classic {
    .ra-tabs-tab {
      border-right: 1px solid var(--ant-color-border);
    }

    &:last-child {
      .ra-tabs-tab {
        border-right: 0;
      }
    }
  }

  /* 卡片样式 */
  .layout-tabs-tab-card {
    padding: 4px 0;
    margin: 0 4px;

    .ra-tabs-tab {
      background-color: var(--ant-color-bg-layout);
      border-radius: 8px;
    }
  }

  /* 灵动样式 */
  .layout-tabs-tab-brisk {
    border-right: 1px solid var(--ant-color-border);

    &:last-child {
      border-right: 0;
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: var(--ant-color-primary);
      transform: scaleX(0);
      transform-origin: left;
    }

    &::before {
      bottom: 0;
    }

    &::after {
      top: 0;
      opacity: 0;
    }

    &.layout-tabs-tab-wrapper-active {
      &::after,
      &::before {
        transform: scaleX(1);
        z-index: 2;
      }
    }

    &:hover:not(.layout-tabs-tab-wrapper-active) {
      &::after,
      &::before {
        transform: scaleX(1);
        z-index: 2;
      }
    }
  }

  /* 梯形 */
  .layout-tabs-tab-trapezoid {
    .ra-tabs-tab {
      color: var(--ant-color-text);
      padding: 12px 0;
      display: flex;
      align-items: center;

      .ra-tabs-tab-content {
        padding: 4px 0 0;
        width: 110px;

        &::after {
          content: '';
          position: absolute;
          top: 4px;
          right: 0;
          width: 100%;
          height: 0;
          border-bottom: 32px solid var(--ant-color-bg-layout);
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          z-index: -1;
          pointer-events: none;
        }
      }
    }

    &.layout-tabs-tab-wrapper-active {
      .ra-tabs-tab {
        background-color: transparent;

        .ra-tabs-tab-content {
          &::after {
            border-bottom-color: var(--ant-color-primary-bg);
          }
        }
      }
    }

    .ra-tabs-tab-remove {
      opacity: 0;
      padding-top: 12px;
    }

    .ra-tabs-tab-pin {
      padding-top: 6px;
    }

    &:hover:not(.layout-tabs-tab-wrapper-active) {
      .ra-tabs-tab {
        background-color: transparent;

        .ra-tabs-tab-content {
          &::after {
            border-bottom-color: var(--ant-color-primary-bg-hover);
          }
        }
      }
    }

    &:hover {
      .ra-tabs-tab-remove {
        opacity: 1;
        padding-top: 12px;
      }
    }
  }

  /* 律动 */
  .layout-tabs-tab-rhythm {
    border-right: 1px solid var(--ant-color-border);

    &:last-child {
      border-right: 0;
    }

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: 0;
      background: var(--ant-color-primary);
      height: 2px;
      transition-property: left, right;
      transition-duration: 0.3s;
      transition-timing-function: ease-out;
      z-index: 1;
    }

    &:hover:not(.layout-tabs-tab-wrapper-active) {
      &::before {
        left: 0;
        right: 0;
      }
    }

    &.layout-tabs-tab-wrapper-active {
      border-bottom: 2px solid var(--ant-color-primary);
      transition: all 0.3s;
    }
  }
}

.app-tabs-right-item {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 4px 8px;
  cursor: pointer;
  border-left: 1px solid var(--ant-color-border);
  transition: all 0.15s ease;

  &:hover {
    color: var(--ant-color-link);
  }

  &:first-child {
    border-left: 0;
  }
}

.ra-tabs-rtl {
  .app-tabs-right-item {
    &:first-child {
      border-left: 1px solid var(--ant-color-border);
    }
  }
}

.layout-tabs-tab-dropdown-disabled {
  cursor: not-allowed;
  color: var(--ant-color-text-disabled);
  pointer-events: none;
}
